<!--
 * @Author: ssj
 * @Date: 2021-12-29 10:01:31
 * @LastEditors: wiz
 * @LastEditTime: 2023-06-21 12:09:31
 * @Description: 
-->
<template>
  <div class="o-input-text">
    <ColorPicker
      v-model="value"
      @on-change="onChange"
      :recommend="recommend"
      :disabled="renderOpts.props.disabled"
    />
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import { ColorPicker } from 'view-design';
import { Tsrv } from '@/services';

@Component
export default class oColorSelector extends Vue {
  @Prop() renderOpts: any;

  @Prop() params: any;

  private value: string = '';

  private recommend: boolean = true;

  private startValue: string = '';

  @Watch('params')
  onParamsChange() {
    this.initProps();
    this.setValue();
  }

  mounted() {
    this.initProps();
    this.setValue();
  }

  private initProps() {
    if (this.params.property) {
      const items = this.params.$form.items;
      const find = Tsrv.utils.find(
        items,
        el => el.field === this.params.property
      );
    }
  }

  public resetValue() {
    this.setValue(null);
    this.setTableValue(null);
  }

  setValue(val: null | string | undefined = undefined) {
    if (this.params.property) {
      this.value =
        val !== undefined ? val : this.params.data[this.params.property];
    } else if (this.params.column) {
      this.value =
        val !== undefined ? val : this.params.row[this.params.column.property];
    }
  }

  setTableValue(val: string | null) {
    if (this.params.property) {
      this.params.data[this.params.property] = val === '' ? null : val;
    } else {
      this.params.row[this.params.column.property] = val === '' ? null : val;
    }
  }

  onChange(val: string) {
    val === '' ? this.setTableValue(null) : this.setTableValue(val);
    this.emitEvent('dochange');
  }

  getValue() {
    return this.params.property
      ? this.params.data[this.params.property]
      : this.params.row[this.params.column.property];
  }

  emitEvent(event: string) {
    const ev = this.renderOpts.events;
    // 深拷贝有问题
    // const params = Tsrv.utils.clone(this.params);
    const params = Tsrv.utils.cloneNoMatchVue(this.params, true);
    params.from = 'color';
    for (const action in ev) {
      if (ev[action] && action === `on-${event}`) {
        ev[action](params);
      }
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep.ivu-color-picker {
  width: calc(100% + 22px);
  margin-left: -11px;
  .ivu-icon {
    margin-right: 0px !important;
  }
  .ivu-select-dropdown {
    width: 260px;
  }
}
</style>
